<template>
	<view class="coupon-list-item">
		<view class="coupon-border">
		</view>
		<view class="coupon-left">
			<view class="name">
				<text>{{couponItem.name}}</text>
			</view>
			<view class="valid" v-if="couponItem.validType=='2'">领取后{{couponItem.validDays}}天内有效</view>
			<view class="valid" v-if="couponItem.validType=='1'">有效期至{{couponItem.endDate}}</view>
			<view class="memo" >每人限领{{couponItem.limitPerUser}}张</view>
			<view class="memo" @click="showMemo(couponItem.memo)">{{couponItem.memo}}</view>
		</view>
		<view class="coupon-right">
			<view v-if="couponItem.type=='DISCOUNT'" class="amount discount">{{couponItem.benefitDiscount}}</view>
			<view v-if="couponItem.type=='CASH'" class="amount cash">{{couponItem.benefitCash}}</view>
			<view v-if="couponItem.conditionAmount>0" class="condition">满{{couponItem.conditionAmount}}元可用</view>
			<view v-else class="condition">满0.01元可用</view>
			<span class="recieve-button" @click="eventClick()" v-if="isAction && actionText">
				{{actionText}}
			</span>
			<span class="recieve-button disabled" v-if="!isAction && noActionText">
				{{noActionText}}
			</span>
		</view>
	</view>
</template>
 
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	name: 'coupon-detail'
	export default {
		components: {
			
		},
		data() {
			return {
				couponItem:this.coupon
			}
		},
		computed: {
			...mapState(['hasLogin', 'hasMerchant', 'userInfo', 'merchantInfo','cartInfo','footPrint', 'applicationConfig']),
		},
		props: {
			coupon: {
				type: Object,
				default: function(){
					return {};
				}
			},
			//是否可以点击该优惠券
			isAction:{
				type: Boolean,
				default: true
			},
			//可以点击时按钮文字
			actionText:{
				type: String,
				default: ''
			},
			//不可以点击时按钮文字
			noActionText:{
				type: String,
				default: ''
			}
		},
		methods: {
			...mapMutations(['updateCartInfo']),
			eventClick(){
				this.$emit('eventClick');
			},
			showMemo(memo){
				uni.showModal({
					title:'使用规则',
					content: memo,
					confirmText:'关闭',
					confirmColor:'#606266',
					showCancel:false,
					success: (e) => {
						
					},
					fail: (e) => {
						
					}
				})
			}
		},
	}
</script>

<style lang='scss'>
	.coupon-list-item {
		display: flex;
		width: 100%;
		/* height: 240upx; */
		margin: 10upx 0;
		border-radius: 5px;
		.coupon-border{
			width: 3%;
			background: #ff0000;
			border-radius: 10px 0 0 10px;
		}
		.coupon-left {
			width: 62%;
			padding: 20upx;
			background: #fff;
			border-width: 0 1px 0 0;
			border-style: dashed;
			border-color: #606266;
			border-radius: 0 10px 10px 0;
			.name{
				margin: 10upx 0;
				font-size: $font-lg;
				font-weight: bold;
				color: $font-color-dark;
			}
			.valid{
				color: $uni-color-primary;
				font-size: $font-base;
			}
			.memo{
				margin:20upx 0;
				color:$font-color-light;
				font-size: $font-base;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}

		.coupon-right {
			display: flex;
			flex-direction: column;
			padding: 20upx;
			width: 35%;
			border-radius: 10px 0 0 10px;
			background: #fff;
			border-width: 0 0 0 1px;
			border-style: dashed;
			border-color: #606266;
			text-align: center;
			.amount{
				margin: 10upx;
				color: $base-color;
				font-size: $font-lg+8upx;
				font-weight: bold;
			}
			.cash {
				&::after{
					content:'元';
					font-size:$font-sm;
				}
			}
			.discount {
				&::after{
					content:'折';
					font-size:$font-sm;
				}
			}
			.condition{
				color: $font-color-light;
				font-size: $font-base;
			}
			.recieve-button{
				border-radius: 100upx;
				padding: 10upx 14upx;
				color: $base-color;
				border: 1px solid $base-color;
				margin: 20upx;
				text-align: center;
				&.disabled{
					background: $uni-color-primary;
					opacity: 0.5;
					color: #fff;
					border:none;
				}
			}
		}
	}
</style>
